baberu: prototyping
英文からAnkiに単語を素早く登録するためのChrome拡張baberuのプロトタイプをする
ネーミングの議論
CardBaberuにリネームするかも
https://gyazo.com/4804ec8abc5fa574c510831dd3aff9bf
解決したいペイン
word miningをする際に、翻訳にLLMで文脈を補うを使いたい
単純な機械翻訳だと、コンテキストが埋め込まれ図に翻訳がこなれなくて困ることがよくある
このツールで出来がいいものはMigakuしかない
後続のようにMigakuではできないことがある
文章からのword miningのツールでAnki用Flash cardに必要な要件を満たし、Ankiに簡単に送れるツールが見当たらない
LLMで対訳を作り、Ankiに一括インポートできる形式で吐き出すはなかなかいいものの、以下の欠点がある
音声がつかない
いちいち全文をScrapboxに転記して加工するのはまだるっこすぎる
文章を丁寧に読みたい時には便利だが、実行コストが高い
サイト上で気軽に実行したい
追加構想1
Word wise機能
/villagepump/2024/10/10#6707b3c4774b170000fd4bba
要件
Anki用Flash cardに必要な要件
素早く登録できる
✅気兼ねないぐらい低コストで実行できる
月に100円以下
月に1200円払うなら、既存のツールをおとなしく使えばいいだろう
達成見込み：baberu コスト試算: OpenAIのAPIを利用しても月額70円以下
設計検討
baberu: （設計）自分が覚えた語彙のDBは必要か？→不要
UI
単語の範囲を選択したら、その単語が含まれる一文をAnkiに登録するレビュー用UIに送る
選択した単語の範囲が太字になる
意味は選択した単語の範囲を中心に解説される
https://gyazo.com/c57bbe9af06b6ef169d75d31a02e608e
使用イメージ
https://gyazo.com/2fe456469b723f6d9441475baff4c59a
Ankiに登録するレビュー用UIでは、軽く手直しができ、満足したらAnki connectを通じてAnkiに送ることができる
翻訳の生成
ChatGPT, ClaudeのLLM APIのサポート
コストがごく低いので、ローカルLLMでなくても良い
オプション：PCのローカルLLMを使って翻訳を生成できる
オプション：自動的にCoubuildの辞書から意味を登録できる
音声を生成できる
試算した結果コストが十分低いので、OpenAIのAPIをメインとすることにした
Googleのtext to speech APIのサポート
無料で使えるので
オプション：OpenAIのtext to speech APIのサポート
オプション：PCでのローカル
https://github.com/KoljaB/RealtimeTTS
Migakuのカードクリエイターみたいなイメージ
https://youtu.be/kp5OSU99QSU?si=AAgq8VJqIipS5fIh&t=277
baberu: 課金機能を作る
基素.iconまず初めにやるべきことは？
https://claude.ai/chat/4aab8de2-490d-40bd-83c4-3df86493d558
Claude 3.5 Sonnet.iconChrome拡張機能プロトタイプ計画
目的
基本的な機能の実現可能性を確認する
主要な技術的課題を特定する
ユーザーインターフェースの基本設計を検証する
実装する基本機能
✅テキスト選択機能
Webページ上でテキストを選択し、コンテキストメニューに拡張機能のオプションを表示
簡易LLM統合
選択されたテキストをLLM APIに送信し、基本的な翻訳と意味解析を取得
注: この段階では完全な機能ではなく、APIとの通信確立が目的
基本的なポップアップUI
LLMからの応答を表示する簡単なポップアップウィンドウ
Ankiへの送信ボタン（機能しない模擬ボタンでOK）
Chrome Storage APIの基本的な使用
選択されたテキストと解析結果の一時保存
実装手順
Chrome拡張機能の基本構造をセットアップ
（bext）✅マニフェストファイルの作成
必要な権限の設定
コンテンツスクリプトの作成
テキスト選択とコンテキストメニュー表示の実装
バックグラウンドスクリプトの作成
LLM APIとの通信処理の実装
簡易ポップアップUIの作成
HTML, CSSを使用した基本的なレイアウト
JavaScriptで動的コンテンツ表示
LLMへの生成ボタンを表示する
LLMの生成結果を表示する
Chrome Storage APIの基本的な使用方法の実装
注意点
この段階では完全な機能実装を目指さず、概念実証に焦点を当てる
セキュリティとプライバシーへの基本的な配慮（APIキーの安全な管理など）を行う
ユーザビリティよりも機能の基本的な動作確認を優先する
期待される成果
主要コンポーネント間の連携の確認
LLM APIとの通信における潜在的な問題の特定
ユーザーインターフェースの基本設計の検証
次の開発フェーズのための具体的なタスクリストの作成
実際に作っていく
Denoで作る
OpenAIのSDKはDenoも対応している
https://deno.com/blog/openai_sdk_deno
https://github.com/openai/openai-deno-build
まずdenoで組み上げてからGoogle cloudを利用するように変更しよう
テンプレートを探す🍅
https://jsr.io/@bpev/bext が便利なツールのようだ
Chrome, Firefoxの両方に対応したmanufest.jsonをつくってくれる
deno向けにブラウザのAPIをよしなしてくれるようだ。それ以上は追っていないのでわからない。
超マイナーツール！
リスク：こいうものを使うと、対応がなくなった時に大変
とりあえずこれで作ってみよう
これに依存したテンプレートを作者が作っている
https://github.com/bpevs/deno_web_extension_starter
テンプレートをセットアップする🍅
文字列を取得するコンテンツスクリプトの作成
ゴール: テキスト選択とコンテキストメニュー表示の実装
❌bextの制約で、コンテキストメニューの表示はできなかったのでpopupににげた
✅テキストを選択したら単語をコピーできる
テキストを選択したら、単語が含まれる文章をコピーできる
✅単語と文章の両方の情報を分けて取得できる
強調表示するために必要
動かない🍅
https://claude.ai/chat/ca418e55-43f9-4e5d-86cb-97750769efd1
bextのbrowser APIには、tab.permission, runtime,storageしかAPIがない
https://github.com/bpevs/bext/blob/main/source/mock_browser/main.ts
内部で https://www.npmjs.com/package/@types/chrome?activeTab=versions を使っている
Claude 3.5 Sonnet.iconcontext menuを使わない方法で実装してみましょう
コメントアウトしていろんなエラーをつぶした🍅
パースのところは動いているようだ。細部のコードは確認できていない。
記号があると途中で文章が切れるバグがある
https://gyazo.com/db1797edd8bd81c9436b671810a63a00
ちゃんと動いててすごい。私はまだコードを読んですらいない基素.icon
Claude 3.5 Sonnet.icon
コンテンツスクリプトはtabs APIにアクセスできないため、runtime.sendMessageを使用する必要があります。
baberu: 気がかりでも後回しにしていることを更新した
TODO：テキストを選択したら、単語が含まれる文章をコピーできる
app.tsxで関数のエラーが出て動かなかったので、コメントアウトしている
Open AIのAPIとの通信部分の作成